<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card class="operatingrecord">
            <template #header>
                <div class="serchbox">
                    <div class="left">
                        <div class="item">
                            <el-input v-model="queryData.keyWords" class="serchs" @input="paginaClick(1)" placeholder="搜索用户名称、联系电话">
                                <template #suffix>
                                    <el-icon class="el-input__icon"><search /></el-icon>
                                </template>
                            </el-input>
                        </div>
                        <sxnfbtn @click="paginaClick(1)" color="#23b14d">搜索</sxnfbtn>
                        <!-- <el-button type="primary" text bg @click="paginaClick(1)">搜索</el-button> -->
                    </div>
                </div>
            </template>
            <el-table :data="pageData.list" style="width: 100%" border>
                <el-table-column prop="name" label="序号" width="50">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="用户名称" width="200"></el-table-column>
                <el-table-column prop="acceptInvitationTime" label="申请时间" width="200"></el-table-column>
                <el-table-column prop="phoneNum" label="联系电话" width="160"></el-table-column>
                <el-table-column prop="userName" label="个人常驻地址">
                    <template #default="scope">
                        {{ scope.row.userAddressArea ? addrAnalysis(scope.row) : "" }}
                    </template>
                </el-table-column>
                <el-table-column prop="invitationStatus" label="邀请结果" width="200">
                    <template #default="scope">
                        {{ scope.row.invitationStatus == "2" ? "已同意" : scope.row.invitationStatus == "-1" ? "已拒绝" : "" }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="60">
                    <template #default="scope">
                        <el-button type="primary" size="small" link @click="topages(`/team/teammanagement/menbermsg/${scope.row.userId}?teamId=${scope.row.invitationStatus == '2' ? selectCompany : ''}`)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :totalNum="pageData.total" @paginaClick="paginaClick"></pagination>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { reactive, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { getApprovedMemoList } from "@/api/team";
const router = useRouter();
const store = useStore();
const topages = (url: string) => {
    router.push(url);
};
// 监听头部公司选择框数据变化
const selectCompany = computed({
    get: () => {
        return store.getters.mainTeamId;
    },
    set: (val) => {
        console.log(val);
    },
});
watch(
    selectCompany,
    (newVal, oldVal) => {
        if (oldVal) {
            // queryData.teamId = newVal;
            getPageData();
        }
    },
    { immediate: true, deep: true }
);
const pageData: any = reactive({
    list: [],
    total: 0,
});
const queryData = reactive({
    pageNum: 1,
    pageSize: 10,
    keyWords: "",
    teamId: selectCompany,
});
const getPageData = () => {
    getApprovedMemoList(queryData).then((res: any) => {
        pageData.list = res.data.list;
        pageData.total = res.data.total;
    });
};
getPageData();
const paginaClick = (val: number) => {
    queryData.pageNum = val;
    getPageData();
};
const addrAnalysis = (row: any) => {
    let addr = JSON.parse(row.userAddressArea);
    let text = `${addr.valueText}/${row.userAddress}`;
    return text;
};
</script>
<style scoped lang="scss">
.operatingrecord {
    .serchbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .item {
                margin-right: 20px;
                color: #333333;
                font-size: 14px;
                .serchs {
                    width: 300px;
                }
            }
        }
    }
}
</style>
